<!--
*  2021-03-15
*  化零出库
-->
<template>
  <div id="app" class="outbound-zeroize">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title"
      ref="header"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="scan" size="20" />
      </template>
    </van-nav-bar>

    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-swipe-cell v-for="(data, index) in tableData" :key="index">
          <van-cell :title="'编号: ' + data.standardNo">
            <template slot="label">
              <div class="outbound-zeroize-cell">
                <span>色号: {{ data.colorName }}</span>
                <span>区域: {{ data.storeArea }}</span>
                <span>规格: {{ data.standardName }}</span>
                <span>重量: {{ data.weight }}</span>
              </div>
            </template>
          </van-cell>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="onDelete(index)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>

    <van-cell-group
      class="outbound-zeroize-btn"
      v-show="tableData.length !== 0"
    >
      <van-button block type="info" class="bgColor" @click="onClickSubmit"
        >确认出库</van-button
      >
    </van-cell-group>
  </div>
</template>

<script>
import { comeBack } from "@/utils/index";
import { getYarnPackageFilter, getYarnStoreOut } from "@/api/yarn";

export default {
  name: "weavingOutboundZeroize",
  data() {
    return {
      title: "化零出库",
      currentPage: 1,
      totalPage: 1,
      tableData: [],
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 退出登录
    onClickLeft() {
      comeBack();
    },
    // 扫码
    onClickRight() {
      this.fnOpenFNScanner();
    },
    // 扫码
    fnOpenFNScanner() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if (!that.$isJSON(content) || content.indexOf(",") == -1) {
            that.$toast.fail("二位码异常");
            return false;
          }
          let ids = eval(content);
          if (ids.toString().indexOf(",") == -1) {
            that.$toast.fail("二位码异常");
            return false;
          }
          let id = ids.split(",")[0];
          getYarnPackageFilter(id, (res) => {
            if (that.tableData.length === 0) {
              that.tableData.push(res);
            } else {
              let result = false;
              that.tableData.forEach((item) => {
                if (item.id == id) {
                  result = true;
                }
              });
              if (result) {
                that.$toast.fail("请勿重复扫码");
              } else {
                that.tableData.push(res);
              }
            }
          });
        }
      });
    },
    // 删除
    onDelete(index) {
      this.tableData.splice(index, 1);
    },
    // 提交
    onClickSubmit() {
      let params = {};
      params.refType = "98";
      params.packageIds = [];
      this.tableData.forEach((item) => {
        params.packageIds.push(item.id);
      });
      getYarnStoreOut(params, () => {
        this.$toast.success("出库成功");
      });
    },
  },
};
</script>

<style lang="scss">
.outbound-zeroize {
  // padding-top: 22px;
  .public-scroll {
    height: calc(100vh - 150px);
    overflow: hidden;

    .outbound-zeroize-cell {
      display: flex;
      flex-wrap: wrap;
      span {
        display: flex;
        width: 50%;
      }
    }
  }
  .outbound-zeroize-btn {
    padding: 16px;
    &.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border-width: 0;
    }
  }
  .van-swipe-cell__right {
    .van-button {
      height: 100%;
    }
  }
}
</style>
